<template>
	<!-- 广告 -->
	<div>
		<MyNavbar :title="navTitle">
			<div slot="right">
				<u-button type="text" text="添加" @click="onClickAdd()"></u-button>
			</div>
		</MyNavbar>
		
		<u-list
			@scrolltolower="scrolltolower"
		>
			<u-list-item
				v-for="(item, index) in list"
				:key="index"
			>
				<u-cell
					:border="false"
					clickable
					style="border-radius:12rpx ;"
					@click="onClickEdit(item)"
				>
					<div slot="label" >
						<!-- 封面图片 -->
						<u-image v-if="adType == 1" radius="12rpx 12rpx 0 0" :src="item.poster" height="300rpx" width="100%">
						</u-image>
						<div class="flex flex-center" style="background-color: #FFFFFF;border-radius: 0 0 12rpx 12rpx;padding: 12rpx;justify-content: space-between;">
							<div ><text style="font-size: 48rpx;">{{item.title}}</text></div>
							<div class="flex flex-center">
								<text style="margin-left: 6rpx;font-size: 12rpx;">{{item.createdTime}}</text>
							</div>
						</div>
					</div>
					
				</u-cell>
			</u-list-item>
			
			<u-loadmore :status="loadStatus" />
		</u-list>
		
		
	</div>
</template>

<script>
	export default {
		props: {
			
		},
		data() {
			return {
				// 类型，1：banner，2：公告
				adType: "1",
				pageSet: {
					page: 1,
					pageSize: 10
				},
				// loadmore  loading / nomore
				loadStatus: 'loadmore',
				// 分页列表数据
				pageData: {},
			}
		},
		computed: {
			navTitle(){
				if (this.adType == "2") {
					return "公告";
				}
				
				return "首页轮播广告";
			},
			list(){
				let {pageData} = this;
				if (pageData) {
					let list = [];
					console.log("pageData", pageData);
					for (let key in pageData) {
						console.log("key-", key);
						console.log("pageData", pageData);
						list.push(...pageData[key]);
					}
					return list;
				}
				return [];
			},
		},
		onLoad(option) {
			this.adType = option.adType || "1";
		},
		onShow() {
			this.onRefresh();
		},
		mounted(){
			
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		methods: {
			// 刷新
			onRefresh(){
				this.pageData = {};
				this.queryList(1, this.pageSet.pageSize);
			},
			// 查询列表
			queryList(page, pageSize){
				let form = {
					page: page,
					pageSize: pageSize,
					adType: this.adType
				};
				this.loadStatus = 'loading';
				this.$api.banner.query(form).then(({data})=>{
					uni.stopPullDownRefresh();
					this.pageSet.page = page;
					
					let records = data.records;
					if (records && records.length > 0) {
						this.$set(this.pageData, page + "", records);
						
						this.loadStatus = 'loadmore';
					} else {
						this.loadStatus = 'nomore';
					}
				}).catch(e=>{
					uni.stopPullDownRefresh();
					this.loadStatus = 'nomore';
				});
			},
			// 点击添加按钮
			onClickAdd(){
				uni.navigateTo({
					url: '/pagesAdmin/admin/banner/edit?operType=add&adType=' + this.adType
				})
			},
			// 点击编辑
			onClickEdit(item){
				uni.navigateTo({
					url: `/pagesAdmin/admin/banner/edit?operType=edit&uid=${item.uid}&adType=${this.adType}`
				})
			},
			// 滚动到底部
			scrolltolower(){
				console.log('滚动到底部');
				let {loadStatus} = this;
				if (loadStatus === 'loadmore') {
					let page = this.pageSet.page + 1;
					this.queryList(page, this.pageSet.pageSize);
				}
			},
		}
	}
	
</script>

<style>
</style>
